<template>
  <view class="feedback">
    <view class="feedback_span">
      <view class="feedback_span_title">反馈内容</view>
      <view class="feedback_span_center">
        <textarea placeholder="请简要描述您的问题和意见，以便我们提供更好的帮助" v-model="content" maxlength="10000"></textarea>
      </view>
    </view>
    <view class="feedback_span">
      <view class="feedback_span_title">图片上传</view>
      <view class="feedback_span_center imageList">
        <view class="imageList_span" v-for="(item, index) in imageList" @longpress="imageList.splice(index, 1)">
          <image :src="item.uri"/>
        </view>
        <view class="imageList_span iconfont icon-iconjia" v-on:click="onChooseImage"></view>
      </view>
    </view>
    <view class="footerBtn">
      <button type="primary" class="footerBtn_li" v-on:click="submitFeedBack">完成</button>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      content: "",
      imageList: []
    }
  },
  methods: {
    /**
     * 选择反馈截图
     */
    onChooseImage() {
      let self = this
      uni.chooseImage({
        count: 1,
        success(res) {
          res.tempFilePaths.forEach(a => {
            self.imageList.push({
              name: "files" + self.imageList.length,
              uri: a
            })
          })
        }
      })
    },
    /**
     * 提交反馈意见
     */
    submitFeedBack() {
      let self = this
      if (!self.content) {
        uni.showToast({
          title: '请输入反馈内容',
          icon: 'none'
        })
        return
      }

      let form = {
        files: self.imageList.length > 0 ? self.imageList : [{name: 'file', uri: "xxx"}],
        formData: {
          content: self.content,
          imageLength: self.imageList.length
        }
      }
      self.$api.addFeedBack(form, {
        loading: true,
        successLabel: "操作成功"
      }).then(res => {
        uni.navigateBack()
      })
    }
  }
}
</script>

<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
@import "../../static/css/form";

.feedback {
  .feedback_span {
    width: calc(100% - 40px);
    padding: 20px;

    .feedback_span_title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .feedback_span_center {
      width: 100%;

      textarea {
        width: 100%;
        font-size: 14px;
      }
    }
  }
}
</style>
